﻿@model DrillOnline.Services.DrillScenarios

@{
    ViewBag.Title = "CtrlPanel";
}
<style type="text/css">
    #pinevents .eit td
    {
        background-color: #fbde54;
    }

    #pinevents .Flag
    {
        background-color: #e51400;
    }

    .eid td
    {
        background-color: white;
        line-height: 22px;
        padding: 2px;
        font-size:9pt;
    }

    .eit td
    {
        background-color: #f3f3f3;
    }

    #events a, #pinevents a
    {
        text-decoration: none;
    }
</style>
<script id="chatitem" type="text/html">
    <div style="display: none; border: 1px solid #fafafa; margin: 8px 0px 8px 0px;">
        <table style="width: 100%; ">
            <tr>
                <td style="width: 40px; text-align: center">
                    <div class="Flag bg-cyan"><%=flag%></div>
                </td>
                <td><strong><%=stringUser%>@@<%=stringGroup%><br />
                    <%=datetimeScenariosTime%></strong></td>
                <td style="width: 64px; text-align: center">&nbsp;</td>
            </tr>
            <tr>
                <td></td>
                <td style="background-color: #fafafa;" colspan="2"><%=stringMessage%></td>
            </tr>
        </table>
    </div>
</script>

<script id="eventitem" type="text/html">
    <div data-eventid="<%=DATA.ID%>" style="display: none; border: 1px solid #fa6800; margin: 8px 0px 8px 0px;">
        <table style="width: 100%">
            <tr class="eit">
                <td style="width: 80px;">
                    <div class="Flag Flag2"><%=DATA.Flag%></div>
                </td>
                <td><strong><%=SB%>&nbsp;<%=InfoLocation%>&nbsp; <%=DATA.Source%>&nbsp;<%=DATA.EventType%><br />
                    <%=DATA.Title%></strong></td>
                <td style="width: 40px; background-color: #ececec"><%if(DATA.ATYPE!=""){%>
                    <a href="/Media/Index/<%=DATA.ID%>" target="innerMedia">媒体资源</a>
                    <%}%>
                </td>
                <td style="width: 40px; background-color: #ececec">
                    <a class="pin" href="#" onclick="return pin(this);">选定作答</a>
                    <a class="unpin" href="#" onclick="return unpin(this);">取消选定</a>

                </td>
            </tr>
            <tr class="eid">
                <td colspan="3" style="padding-left:40px;"><%=DATA.Content%></td>
            </tr>
        </table>
    </div>
</script>



@section scripts {

    <script src="~/Scripts/jquery.signalR-2.0.0.min.js"></script>
    <script src="~/Scripts/jquery-ui-1.10.3.js"></script>
    <script src="~/Scripts/arttemplate.js"></script>
    @*    <script src="~/Scripts/template-syntax.js"></script>*@

    <script src="~/signalr/hubs"></script>

    <script type="text/javascript">
        template.helper("if",function(){
        });
        function pin(obj){
            $(obj).closest('div').clone().hide().appendTo('#pinevents').fadeIn();
        }
        function unpin(obj){
            $(obj).closest('div').fadeOut(300,function(){$(this).remove();});
        }
        function viewmedia(atype,akey){
            
        }
        $(function () {
            var eventCount = 0;
            var scenario = $.connection.drillEventHub;
            scenario.client.Broadcast = function (result) {
                for (var i = 0; i < result.SceneList.length; i++) {
                    var sc = result.SceneList[i];
                    //var sb = new Date(result.SB);
                    //sb.setSeconds(sb.getSeconds() + sc.Offset * result.TR);
                    //var ps = new Date(result.PS);
                    //ps.setSeconds(ps.getSeconds() + sc.Offset);

                    var data = { SB: sc.BT, PS: "", DATA: sc };
                    $(template.render('eventitem', data)).prependTo($('#events'))
                        .fadeIn('slow');
                    eventCount++;
                }
                if (eventCount > 80) {
                    $("#events div:gt(60)").remove();
                    eventCount = 60;
                }
            };

            scenario.client.PushMessage = function (datetimeNow, stringUser, stringGroup,flag, datetimeScenariosTime, stringMessage) {
                eventCount++;
                $(template.render('chatitem', { datetimeNow: datetimeNow, stringUser: stringUser, stringGroup: stringGroup,flag:flag, datetimeScenariosTime: new Date(Date.parse(datetimeScenariosTime)).toLocaleString(), stringMessage: stringMessage }))
                    .prependTo($('#events')).fadeIn("slow");
            };
            scenario.client.StatusChange = function (Now, IsReady, Status) {
                updateStatus(Now,IsReady,Status);
            }
            scenario.client.PlayIndexChange=function(Now,ST,PO,SortIndex,Offset,STT,nt){
 
                updatePlayIndex(nt,STT,PO,SortIndex,Offset);
            }

            $('#message').focus();

            $.connection.hub.start().done(function () {
                scenario.server.queryOldEvents();
                updateStatus(null, @(ThisSession.IsReady ? "true" : "false"), @(ThisSession.Timeline.Status));
                try{
                    updatePlayIndex('@(DateTime.Now.ToString("yyyy年MM月dd日HH点mm分"))','@(ThisSession.Timeline.StoryBaseTime.AddSeconds(ThisSession.Timeline.PlayingOffset).ToString("yyyy年MM月dd日HH点mm分"))',@(ThisSession.Timeline.PlayingOffset),@(ThisSession.SceneList[@ThisSession.Timeline.PlayingSceneIndex].Model.SortIndex) ,null);
                }catch(e){
                }
                $('#chatbox a').click(function(){
                    return false;
                });
                $('#chatbox .Flag').click(function () {
                    var msg=$('#message').val();
                    if(msg.trim()!=""){
                        var pe=$("#pinevents>div");
                        if(pe.length==0&&$(this).attr("data-msgtype")=="submit"){
                            alert("没有选定的消息。请先选定作答。");
                            return;
                        }
                        var ce=pe.last();

                        scenario.server.sendMessage($(this).attr("data-msgtype"),$(this).attr("data-tid"), $('#message').val(),ce.attr("data-eventid"));
                        ce.fadeOut(300,function(){$(this).remove();})
                        $('#message').val('').focus();
                    }
                    return false;
                });
            });
        });
        // This optional function html-encodes messages for display in the page.
        function htmlEncode(value) {
            var encodedValue = $('<div />').text(value).html();
            return encodedValue;
        }
        function updatePlayIndex(Now,ST,PO,SortIndex,Offset){
            //$("#prop_crt").text(new Date(Date.parse(Now)).toLocaleString());
            $("#prop_cst").text(ST);
            var po=new Date(PO*1000);
            $("#prop_et").text(""+(po.getDate()-1)+"天"+(po.getHours()-8)+"小时"+po.getMinutes()+"分"+po.getSeconds()+"秒");
    
        }
        

        function updateStatus(Now, IsReady, Status) {
            var t = "";
            var s = 0; var c = 0;
            if (!IsReady) {
                t = "未开始";
                s = 0;
            } else {
                s = 1;
                c = Status;
                if (Status == 0) {
                    t = "已停止";
                } else if (Status == 1) {
                    t = "已暂停";
                } else if (Status == 2) {
                    t = "进行中";
                }
            }
            $("#playstatus").text(t);
            if (IsReady) {
                $('#chatbox').slideDown();
            } else {
                $('#chatbox').slideUp();
                navigate("Index");
            }
        }
    </script>

}


<section style="float: left; width: 50%; min-height: 400px">
    <section class="bg-white" style="width: 95%; max-height: 700px; overflow: scroll; float: left; padding: 0px 6px 0px 6px">
        <div id="events" class="bg-white" style="padding: 0px;">
        </div>
    </section>

</section>
@*    <section style="max-height: 600px; overflow: auto; float: right; width: 50%; margin-right: 4px;">

    </section>*@
<section style="float: right; width: 50%; min-height: 400px; height: 100%">
    <section id="itemol" class="bg-white" style="max-height: 650px; overflow: auto; float: left; width: 100%; margin-left: 4px; padding: 0px 16px 0px 16px;">

        <div style="display: none" id="chatbox">
            <div id="pinevents" class="bg-white" style="padding: 0px;">
            </div>
            <label>响应内容：</label>
            <textarea title="输入响应内容后，点击下面目标发送。" id="message" rows="4" cols="32"
                style="width: 100%"></textarea><br />

            <a href="SendMessage">
                @if(SiteUser.Identity.Name.StartsWith("[")){
                <div class="Flag" data-msgtype="submit" data-tid="@(ScenariosUser.GroupKey)" style="width: 80px; float: left;" title="只提交响应内容">
                    提交
                </div>
                }
                @foreach (var item in Model.ActorGroups.OrderBy(v => v.Model.SortIndex))
                {
                    if (!item.GroupKey.StartsWith("["))
                    {
                    <div class="Flag bg-cyan" style="float:right;" data-msgtype="chat" data-tid="@item.GroupKey" title="发送给 @item.GroupKey">
                        @item.Model.Flag
                    </div>
                    }
                }

            </a>
            <br />
            <br />
        </div>
        <table style="width: 100%">
            <tr>
                <td>
                    <p class="prop">
                        <label>发生时刻</label>@Model.Subject.StoryBaseTime.ToString("yyyy年MM月dd日HH点mm分")
                    </p>
                    <p class="prop">
                        <label>事件时长</label>@TimeSpan.FromSeconds(Model.Subject.TotalPlayingSec).ToString()
                    </p>
                    @*                    <p class="prop">
                        <label>演练速度</label>1 : @Model.Subject.PlayingRate
                    </p>*@
                </td>

                <td>

@*                    <p class="prop">
                        <label>当前时间</label><span id="prop_crt">@Model.Timeline.RealCurrentTime.ToString("yyyy年MM月dd日HH点mm分")</span>
                    </p>*@
                    <p class="prop">
                        <label>当前时间</label><span id="prop_cst">@Model.Timeline.RealCurrentTime.ToString("yyyy年MM月dd日HH点mm分")</span>
                    </p>
                    <p class="prop">
                        <label>震后时间</label><span id="prop_et">@TimeSpan.FromSeconds(Model.Timeline.PlayingOffset).ToString()</span>
                    </p>

                </td>
            </tr>
        </table>

        @*<pre>@Html.DisplayFor(m => Model.Subject.Description)</pre>*@
        <iframe name="innerMedia" frameborder="0" border="0" width="100%" height="360px" scrolling="no" src="about:blank"></iframe>

    </section>
</section>
